<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>北京科技报</title>
		<link href="css/common.css" rel="stylesheet">
		<link href="css/header.css" rel="stylesheet">
		<link href="css/topicList.css" rel="stylesheet">
		<link href="css/bookstarp.css" rel="stylesheet">
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="vue_det">
			<div class="header-box">
				<div class="header flex align-end">
					<div class="flex-one">
						<img class="header-logo" src="images/logoff.png" />
						<div class="font-12 color-ff">聚焦科学传播 弘扬科学精神</div>
					</div>
					<div class="header-search-btn">
						<img class="header-search" src="images/search.png" />
					</div>
				</div>
				<div class="padding-lr-12 bg-ff" style="height: 43px;line-height: 43px;">
					<span class="font-12">当前位置：</span>
					<span class="font-12">专题</span>
					<span class="font-12">＞</span>
					<span class="font-12 color-main">专题列表</span>
				</div>
			</div>
			<div class="box margin-top-120">
				<img class="top-img" src="images/app.png" />
				<div class="padding-14">
					<div class="font-18 text-bold">2024中关村论坛 | 探寻新质生产力</div>
					<div class="font-14 margin-top-16">
						太阳即将氦闪，地球遭遇到强大的太阳风暴，人类不得不决定带着地球逃往最近的恒星比邻星；建造上万座行星发动机，推动地球离开太阳系，奔向新家园。</div>
				</div>
				<div style="height: 10px;background: #F6F6F6;"></div>
				<div class="padding-tb-10">
					<div>
						<div id='container' class="padding-lr-12">
							<div>
								<div class="color-main font-17">分类名称</div>
								<div class="flex align-center bg-ff margin-top-8">
									<div class="header-xian flex-one"></div>
									<div class="header-radius"></div>
								</div>
							</div>
							<div class=" margin-top-20">
								<a href="">
									<div class="flex">
										<div class="flex-one flex flex-column justify-between">
											<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”
											</div>
											<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
												<span class="margin-right-10">2024/07/12</span>
												<span>科普中央厨房</span>
											</div>
										</div>
										<img class="content-left-img" src="images/app.png" />
									</div>
								</a>
							</div>
							<div class=" margin-top-20">
								<a href="">
									<div class="flex">
										<div class="flex-one flex flex-column justify-between">
											<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”
											</div>
											<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
												<span class="margin-right-10">2024/07/12</span>
												<span>科普中央厨房</span>
											</div>
										</div>
										<img class="content-left-img" src="images/app.png" />
									</div>
								</a>
							</div>
							<div class=" margin-top-20">
								<a href="">
									<div class="flex">
										<div class="flex-one flex flex-column justify-between">
											<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”
											</div>
											<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
												<span class="margin-right-10">2024/07/12</span>
												<span>科普中央厨房</span>
											</div>
										</div>
										<img class="content-left-img" src="images/app.png" />
									</div>
								</a>
							</div>
							<div class=" margin-top-20">
								<a href="">
									<div class="flex">
										<div class="flex-one flex flex-column justify-between">
											<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”
											</div>
											<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
												<span class="margin-right-10">2024/07/12</span>
												<span>科普中央厨房</span>
											</div>
										</div>
										<img class="content-left-img" src="images/app.png" />
									</div>
								</a>
							</div>
				
						</div>
						<div class="flex justify-center margin-top-20">
							<div class="load-box flex align-center justify-center" v-on:click="loadMore">
								<div class="color-main font-13">{{isLoading?'加载中':'点击加载更多'}}</div>
								<img class="load-span" src="images/ls.png" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

<script>
	var vm = new Vue({
		el: '#vue_det',
		data: {
			isLoading: false
		},
		mounted: function() {

		},
		methods: {
			loadMore: function() {
				this.isLoading = true;
				setTimeout(() => {
					console.log(123)
					// 获取容器元素
					var container = document.getElementById("container");
					// 创建一个新的div元素
					var newDiv = document.createElement("div");
					// 设置div的内容
					newDiv.innerHTML =
						'<div class=" margin-top-20"><a href=""><div class="flex"><div class="flex-one flex flex-column justify-between"><div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”</div><div class="font-12 margin-bottom-4" style="color: #6A6B6B;"><span class="margin-right-10">2024/07/12</span><span>科普中央厨房</span></div></div><img class="content-left-img" src="images/app.png" /></div></a></div>';
					// 将新创建的div添加到容器的最后
					container.appendChild(newDiv);

					this.isLoading = false;
				}, 500); // 模拟异步加载数据
			}
		}
	})
</script>